/* eslint-disable max-len */
import {lazy, Suspense} from 'react';
import {Spinner} from 'react-bootstrap';
import type {RouteObject} from 'react-router-dom';
import App from '../App';

export const page = {
    JsonEditor: lazy(() => import('../page/JsonEditor')),
    Diff: lazy(() => import('../page/Diff'))
};

export const pageMap = Object.entries(page).reduce((total, [name, Page]) => {
    total[name as keyof typeof page] = (
        <Suspense fallback={<div className='flex-center'><Spinner variant="primary" /></div>}>
            <Page />
        </Suspense>
    );
    return total;
}, {} as Record<keyof typeof page, JSX.Element>);

export const routes: RouteObject[] = [
    {
        element: <App />,
        children: [
            {
                path: 'json-editor',
                Component: () => pageMap.JsonEditor
            },
            {
                path: 'diff',
                Component: () => pageMap.Diff
            },
            {
                path: '*',
                Component: () => pageMap.JsonEditor
            }
        ]
    }
];

export const HEAD_TO_ROUTE = [
    {
        path: 'json-editor',
        head: () => <>
            <title>JSON在线解析及格式化 - toolkit</title>
            <meta name="keywords" content="json,json在线解析,json格式化,json格式验证,json压缩,json转义,js混淆加密,json在线,JSON校验,json tools,主机评测,主机测评,新手教程,技术博客,电子工具"/>
            <meta name="description" content="本工具提供相关的Json解析、验证、格式化、压缩、编辑器等服务"/>
        </>
    },
    {
        path: 'diff',
        head: () => <>
            <title>Diff文本比较 - toolkit</title>
            <meta name="keywords" content="在线对比,比较,对比工具,比较工具,文本对比,代码对比,差异检测,diffuse"/>
            <meta name="description" content="本工具可以方便大家快速对比两个文本/代码中的不同之处。"/>
        </>
    }
];
